<template>
	<view class="content">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title">{{type=='perfect'?'创建名片':'个人信息'}}</view>
			<view class="sub-title">向求职者介绍一下自己吧</view>
			<view class="form-item photo">
				<view class="form-label">头像</view>
				<button hover-class="none" @chooseavatar="photoChoose" open-type="chooseAvatar" class="photo" style="border: none;padding: 0;background: none;">
					<image :src="form.faceUrl?form.faceUrl:imageUrl+'/job_hunting/home/Mr.png'" class="photo"></image>
				</button>
				
			</view>
			<view class="form-item">
				<view class="form-label">姓名</view>
				<view class="form-content">
					<input v-model="form.realName" maxlength="10" type="text" placeholder-class="inputPlaceholder"
						placeholder="请填写姓名" class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">我的公司</view>
				<view class="form-content">
					<block v-if="type == 'perfect'">
						<Combox labelKey="enterpriseName" valueKey="id" :candidates="comList" :border="false"
							emptyTips="无匹配项" placeholder="请选择我的公司"  @input="fieldNameChange" @dict="fieldIdChange"
							class="form-ctrl" @pageBottom="pageBottom"></Combox>
							<view class="iconfont icon-gengduo1 arrow"></view>
					</block>
					<block v-else>
						<view class="form-ctrl" style="color:#999;">{{comName}}</view>
					</block>
					<!-- <input v-model="form.com_name" maxlength="30" type="text" placeholder-class="inputPlaceholder" placeholder="请填写公司名称" class="form-ctrl" @input="onInput"/> -->
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">我的职务</view>
				<view class="form-content">
					<input v-model="form.comPosition" maxlength="30" type="text" placeholder-class="inputPlaceholder"
						placeholder="请填写职务名称" class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view @click="handleSave" class="btn">保存</view>
		</view>
	</view>
</template>

<script>
	import {getEnterpriseList,addComOne,getComRecruiters} from '@/api/company.js'
	import {uploadFile} from '@/api/file.js'
	import { validate } from '@/util/validate';
	import Combox from '@/page_other/components/Combox/Combox'
	export default {
		components: {
			Combox
		},
		data() {
			return {
				comListConf:{
					loading:false,
					searchComName:'',
					total:0,
					comPage:1,
				},
				comName:'',
				comList: [],
				form: {
					faceUrl: '',
					realName: '',
					comId: '',
					comPosition: '',
					type:'add'
				},
				rules: {
					// faceUrl: {
					// 	name: '头像',
					// 	required: true
					// },
					realName: {
						name: '姓名',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的姓名')
							}
							callback();
						}
					},
					comId: {
						name: '公司',
						required: true,
						validator: function(value, form, callback) {
							if (value <= 0) {
								callback('请选择公司')
							}
							callback();
						}
					},
					comPosition: {
						name: '职务名称',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的职务名称')
							}
							callback();
						}
					},
				},
				editRules: {
					faceUrl: {
						name: '头像',
						required: true
					},
					realName: {
						name: '姓名',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的姓名')
							}
							callback();
						}
					},
					comPosition: {
						name: '职务名称',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的职务名称')
							}
							callback();
						}
					},
				},
				imageUrl: '',
				type:null,
			}
		},
		methods: {
			pageBottom(){
				if(this.comListConf.page*100<this.comListConf.total){
					this.comListConf.page++;
					this.getEnterprise()
				}
			},
			fieldNameChange(e){
				this.comListConf.searchComName=e;
				this.comListConf.page=1;
				this.getEnterprise();
			},
			fieldIdChange(e){
				console.log(e)
				this.form.comId = e;
			},
			photoChoose(e){
				const filePath=e.detail.avatarUrl;
				uni.showLoading({
					title:'上传中',
					mask:true
				})
				uploadFile(filePath).then((res)=>{
					const data=JSON.parse(res.data);
					uni.hideLoading()
					if(data.code==200){
						this.showToast('上传成功')
						this.form.faceUrl=data.data
					}else{
						this.showToast(data.msg)
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.showToast('上传失败');
				})
			},
			getEnterprise(){
				if(this.comListConf.loading)return;
				this.comListConf.loading=true;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getEnterpriseList({comName:this.comListConf.searchComName,page:this.comListConf.page,limit:100}).then((res)=>{
					this.comList=res.list??[];
					this.comListConf.total=res.count;
				}).finally(()=>{
					this.loading=false;
					this.comListConf.loading=false;
				})
			},
			getDetail(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getComRecruiters({}).then((res)=>{
					this.form.realName=res.com.realName;
					this.form.comPosition=res.com.comPosition;
					this.form.faceUrl=res.faceUrl;
					this.form.comId=res.com.comId
					this.comName=res.com.comName;
				})
			},
			handleSave(){
				if(this.type=='perfect'){
					if(validate(this.form,this.rules)){
						uni.showLoading({
							title:'提交中',
							mask:true
						})
						addComOne(this.form).then(()=>{
							this.showToast('保存成功',()=>{
								this.$store.dispatch('user/getUser')
								uni.redirectTo({
									url:`/page_other/enterprise/authorization/authentication`
								})
							})
						})
					}
				}else{
					if(validate(this.form,this.editRules)){
						uni.showLoading({
							title:'提交中',
							mask:true
						})
						addComOne(this.form).then(()=>{
							this.showToast('保存成功',()=>{
								this.$store.dispatch('user/getUser')
							})
						})
					}
				}
				
			}
		},
		onLoad(e) {
			this.type=e.type
			if(this.type!='perfect'){
				this.getDetail()
				this.form.type='modify';
			}
			this.imageUrl = this.globalConfig.imageUrl;
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 80rpx;
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				margin: 20rpx 0;
				font-size: 26rpx;
				color: #999;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					color: #999;
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form-ctrl {
						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}

					uni-combox {
						display: flex;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			.form-item.photo {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-bottom: 30rpx;

				.photo {
					flex-grow: 0;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.form-label {
					flex-grow: 1;
				}
			}
		}
	}
</style>
